<template>
  <div class="zong">
    <div class="types">
      <div class="title">题材</div>
      <div
        @click="(typeId = -1), initData()"
        :class="typeId == -1 ? 'active' : 'type'"
      >
        全部
      </div>
      <div
        v-for="item in animationType"
        :key="item.id"
        @click="changeTypes(item.id)"
        :class="typeId == item.id ? 'active' : 'type'"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="types">
      <div class="title">地区</div>
      <div
        @click="(areasId = -1), initData()"
        :class="areasId == -1 ? 'active' : 'type'"
      >
        全部
      </div>
      <div
        class="type"
        v-for="item in animationTypeAreas"
        :key="item.id"
        @click="changeAreas(item.id)"
        :class="areasId == item.id ? 'active' : 'type'"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="types">
      <div class="title">进度</div>
      <div
        @click="(isFinish = -1), initData()"
        class="type"
        :class="isFinish == -1 ? 'active' : 'type'"
      >
        全部
      </div>
      <div
        class="type"
        v-for="item in animationTypeStatus"
        :key="item.id"
        @click="changeStatus(item.id)"
        :class="isFinish == item.id ? 'active' : 'type'"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="types">
      <div class="title">收费</div>
      <!-- <div
        @click="(pageNum = 1), initData()"
        class="type"
        :class="pageNum == -1 ? 'active' : 'type'"
      >
        全部
      </div> -->
      <div
        class="type"
        v-for="item in animationTypePrices"
        :key="item.id"
        @click="changePrices(item.id)"
        :class="pageNum == item.id ? 'active' : 'type'"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="types">
      <div class="title">排序</div>
      <div
        class="type"
        v-for="item in animationTypeOrders"
        :key="item.id"
        @click="changeOrders(item.id)"
        :class="order == item.id ? 'active' : 'type'"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="imgList"  v-if="isShow">
      <ClassiFicationTypes
        v-for="item in datas"
        :key="item.id"
        :item="item"
      ></ClassiFicationTypes>
    </div>
  </div>
</template>

<script>
import ClassiFicationTypes from "@/components/ClassiFicationTypes.vue";
export default {
  components: {
    ClassiFicationTypes,
  },
  props: {
    animationType: {
      type: Array,
    },
    animationTypeOrders: {
      type: Array,
    },
    animationTypePrices: {
      type: Array,
    },
    animationTypeStatus: {
      type: Array,
    },
    animationTypeAreas: {
      type: Array,
    },
  },
  data() {
    return {
      typeId: -1,
      order: 0,
      pageNum: 1,
      pageSize: 39,
      areasId: -1,
      isFinish: -1,
      isFree: -1,
      datas: null,
      isShow:true
    };
  },
  methods: {
    changeTypes(id) {
      if (id == this.typeId){
        return 
      }
      this.typeId = id;
      this.initData();
    },
    changeAreas(id) {
      if (id == this.areasId){
        return 
      }
      this.areasId = id;
      this.initData();
    },
    changeOrders(id) {
      if (id == this.order){
        return 
      }
      
      this.order= id;
     
      this.initData();
    },
    changePrices(id) {
      if (id == this.pageNum){
        return 
      }
      this.pageNum = id;
      this.initData();
    },
    changeStatus(id) {
      if (id == this.isFinish){
        return 
      }
      this.isFinish = id;
      this.initData();
    },
  
    initData() {
      this.isShow = false;
      this.$axios
          .get(
            `https://apis.netstart.cn/bcomic/ClassPage?styleId=${this.typeId}&areaId=${this.areasId}&isFinish=${this.isFinish}&order=${this.order}&pageNum=${this.pageNum}&pageSize=12&isFree=-1`
          )
          .then((response) => {
            this.datas = response.data.data;
            if(this.datas.length==0){
              this.datas=[{
                isShow:'显示找不到内容'
              }]
            }
          })
          .catch((err) => {
            console.log(err);
          });
      
      setTimeout(() => {
        
          this.isShow = true;
      },500);
    },
  },
  created() {
    this.initData();
    
    
  },
};
</script>

<style lang="less" scoped>
.zong {
  width: 1160px;
  margin: 0 auto;
  margin-top: 24px;
  margin-bottom: 24px;
  min-height: 900px;

  .types {
    display: flex;
    flex-wrap: wrap;
    margin: 0px 0px 10px;
    height: 30px;
    line-height: 30px;
    .title {
      font-size: 14px;
      color: #00000057;
      margin: 0px 14px 0px 0px;
    }
    .type {
      padding: 0px 10px;
      margin: 0px 4px;
      font-size: 14px;

      color: #000000de;
    }
    .active {
      padding: 0px 10px;
      margin: 0px 4px;
      font-size: 14px;
      color: #169cfc;
      background-color: #c5e6ff;
      border-radius: 10px;
      transition: color 0.5s ease-in-out;
    }
  }
  .imgList {
    width: 1160px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: 19px;
    justify-content: space-between;
  }
}
</style>
